<template>
  <view class="sentence-training-game">
    <!-- 游戏主区域 -->
    <view class="game-container">
      <!-- 题目类型提示 -->
      <view class="question-type">
        <text class="type-badge">句子排序</text>
        <text class="type-hint">将单词按正确顺序排列</text>
      </view>

      <!-- 中文提示区域 -->
      <view class="chinese-hint">
        <text class="hint-title">中文意思：</text>
        <text class="hint-text">{{ currentQuestionData.chineseMeaning }}</text>
      </view>

      <!-- 当前排序区域 -->
      <view class="current-sentence-area">
        <text class="area-title">当前排列：</text>
        <view class="current-sentence">
          <view
              v-for="(word, index) in currentQuestionData.userOrder"
              :key="index"
              class="sentence-word"
              :class="getWordClass(word, index)"
              @click="removeWord(index)"
          >
            <text class="word-text">{{ word.text }}</text>
            <text class="word-number">{{ index + 1 }}</text>
          </view>
          <view v-if="currentQuestionData.userOrder.length === 0" class="empty-placeholder">
            <text>点击下方单词开始排序</text>
          </view>
        </view>
      </view>

      <!-- 单词选择区域 -->
      <view class="word-options-area">
        <text class="area-title">可选单词：</text>
        <view class="word-options">
          <view
              v-for="(word, index) in currentQuestionData.availableWords"
              :key="index"
              class="word-option"
              :class="{ used: word.used, correct: word.isCorrect && showResult, wrong: word.isWrong && showResult }"
              @click="selectWord(word)"
          >
            <text class="word-text">{{ word.text }}</text>
            <text v-if="word.used" class="word-used">✓</text>
          </view>
        </view>
      </view>

      <!-- 原句参考（调试用，正式版可隐藏） -->
      <view v-if="showOriginal" class="original-sentence">
        <text class="original-title">参考原句：</text>
        <text class="original-text">{{ currentQuestionData.originalSentence }}</text>
      </view>
    </view>

    <!-- 游戏头部信息 -->
    <view class="game-header">
      <view class="score-info">
        <text class="score-label">分数</text>
        <text class="score-value">{{ score }}</text>
      </view>
      <view class="progress-info">
        <text class="progress-label">进度</text>
        <text class="progress-value">{{ currentQuestion }}/{{ totalQuestions }}</text>
      </view>
      <view class="error-info">
        <text class="error-label">错误</text>
        <text class="error-value">{{ errors }}/{{ maxErrors }}</text>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button
          class="action-btn submit-btn"
          :disabled="!canSubmit || showResult"
          @click="submitAnswer"
      >
        <text class="btn-text">提交答案</text>
      </button>

      <button
          class="action-btn reset-btn"
          @click="resetSentence"
          :disabled="currentQuestionData.userOrder.length === 0"
      >
        <text class="btn-text">重新排序</text>
      </button>

      <button
          class="action-btn hint-btn"
          @click="showHint"
          :disabled="showResult || hintsAvailable <= 0"
      >
        <text class="btn-text">提示 ({{ hintsAvailable }})</text>
      </button>

      <button
          class="action-btn next-btn"
          v-if="showResult"
          @click="nextQuestion"
      >
        <text class="btn-text">下一题</text>
      </button>
    </view>

    <!-- 反馈区域 -->
    <view v-if="showResult" class="result-feedback" :class="isAnswerCorrect ? 'correct' : 'wrong'">
      <text class="feedback-icon">{{ isAnswerCorrect ? '🎉' : '😔' }}</text>
      <text class="feedback-text">{{ isAnswerCorrect ? '排序正确！' : '排序错误！' }}</text>
      <text class="feedback-detail">正确答案：{{ currentQuestionData.originalSentence }}</text>
    </view>

    <!-- Toast提示 -->
    <view v-if="showToast" class="toast-container" :class="toastType">
      <view class="toast-content">
        <text class="toast-icon">{{ toastIcon }}</text>
        <text class="toast-text">{{ toastMessage }}</text>
      </view>
    </view>

    <!-- 游戏结束弹窗 -->
    <view v-if="showGameOver" class="game-over-modal">
      <view class="modal-content">
        <text class="modal-title">{{ gameResult === 'win' ? '🎊 恭喜完成！' : '💔 游戏结束' }}</text>

        <view class="modal-stats">
          <view class="stat-item">
            <text class="stat-label">最终得分</text>
            <text class="stat-value">{{ score }}</text>
          </view>
          <view class="stat-item">
            <text class="stat-label">正确题数</text>
            <text class="stat-value">{{ correctCount }}/{{ totalQuestions }}</text>
          </view>
          <view class="stat-item">
            <text class="stat-label">准确率</text>
            <text class="stat-value">{{ accuracy }}%</text>
          </view>
        </view>

        <view class="modal-actions">
          <button class="modal-btn restart-btn" @click="restartGame">
            <text>再玩一次</text>
          </button>
          <button class="modal-btn exit-btn" @click="exitGame">
            <text>退出</text>
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {getWordListByCourseId} from "../../../api/wordSystemCourse";

export default {
  name: "SentenceTrainingGame",
  props: {
    wordData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 游戏状态
      score: 0,
      currentQuestion: 1,
      totalQuestions: 0,
      errors: 0,
      maxErrors: 0,
      correctCount: 0,
      showResult: false,
      isAnswerCorrect: false,
      showGameOver: false,
      gameResult: '',

      // 提示系统
      hintsAvailable: 3,
      showOriginal: false, // 调试用，显示原句

      // Toast提示
      showToast: false,
      toastType: '',
      toastMessage: '',
      toastIcon: '',
      toastTimer: null,

      // 当前题目数据
      currentQuestionData: {
        originalSentence: '',
        chineseMeaning: '',
        correctOrder: [],
        userOrder: [],
        availableWords: [],
        usedExamples: new Set()
      },

      // 所有例句数据
      allExamples: [],
      usedExamples: new Set()
    };
  },

  computed: {
    // 是否可以提交答案
    canSubmit() {
      return this.currentQuestionData.userOrder.length === this.currentQuestionData.correctOrder.length;
    },

    // 准确率
    accuracy() {
      return this.totalQuestions > 0 ? Math.round((this.correctCount / this.totalQuestions) * 100) : 0;
    }
  },

  onLoad() {
    this.initGame();
  },

  onUnload() {
    if (this.toastTimer) {
      clearTimeout(this.toastTimer);
    }
  },

  methods: {
    // 初始化游戏
    async initGame() {
      // 加载数据
      await this.loadData()
      this.extractAllExamples();
      this.generateNewQuestion();
    },

    async loadData() {
      const res = await getWordListByCourseId({courseId: this.$route.query.courseId})
      this.wordData = []
      res.forEach(item => {
        if (item.extendedInfo) {
          this.wordData.push(item)
        }
      })
      this.hintsAvailable = Math.min(this.wordData.length, 3)
    },

    // 提取所有例句
    extractAllExamples() {
      this.allExamples = [];

      this.wordData.forEach(item => {
        try {
          const extendedInfo = JSON.parse(item.extendedInfo);
          if (extendedInfo.examples && Array.isArray(extendedInfo.examples)) {
            extendedInfo.examples.forEach(example => {
              this.allExamples.push({
                english: example.e,
                chinese: example['zh-mean'],
                sourceWord: extendedInfo.word
              });
            });
          }
        } catch (error) {
          console.error('解析例句数据失败:', error);
        }
      });

      console.log('提取到的例句:', this.allExamples);
      this.totalQuestions = Math.min(this.allExamples.length, 25);
      this.maxErrors = Math.ceil(this.totalQuestions / 5);
    },

    // 生成新题目
    generateNewQuestion() {
      if (this.allExamples.length === 0) {
        console.error('没有可用的例句数据');
        return;
      }

      // 对 this.allExamples 进行洗牌算法打乱
      this.allExamples = this.shuffleArray(this.allExamples);

      // 随机选择未使用过的例句
      let availableExamples = this.allExamples.filter(example =>
          !this.usedExamples.has(example.english)
      );

      if (availableExamples.length === 0) {
        // 如果所有例句都已使用，重置使用记录
        this.usedExamples.clear();
        availableExamples = [...this.allExamples];
      }

      const randomIndex = Math.floor(Math.random() * availableExamples.length);
      const selectedExample = availableExamples[randomIndex];
      this.usedExamples.add(selectedExample.english);

      // 处理句子：移除标点，分割单词
      const cleanedSentence = selectedExample.english.replace(/[.,?!;:()]/g, '');
      const words = cleanedSentence.split(' ').filter(word => word.length > 0);

      // 打乱单词顺序
      const shuffledWords = this.shuffleArray([...words]);

      // 准备题目数据
      this.currentQuestionData = {
        originalSentence: selectedExample.english,
        chineseMeaning: selectedExample.chinese,
        correctOrder: words.map((word, index) => ({
          text: word,
          originalIndex: index,
          isCorrect: true
        })),
        userOrder: [],
        availableWords: shuffledWords.map((word, index) => ({
          text: word,
          originalIndex: words.indexOf(word),
          used: false,
          isCorrect: false,
          isWrong: false
        }))
      };

      this.showResult = false;
      this.isAnswerCorrect = false;
    },

    // 选择单词
    selectWord(word) {
      if (this.showResult || word.used) return;

      // 标记单词为已使用
      word.used = true;

      // 添加到用户排序
      this.currentQuestionData.userOrder.push({
        text: word.text,
        originalIndex: word.originalIndex,
        userIndex: this.currentQuestionData.userOrder.length
      });

      // 振动反馈
      uni.vibrateShort();
    },

    // 移除单词
    removeWord(index) {
      if (this.showResult) return;

      const removedWord = this.currentQuestionData.userOrder[index];

      // 从用户排序中移除
      this.currentQuestionData.userOrder.splice(index, 1);

      // 更新后续单词的索引
      for (let i = index; i < this.currentQuestionData.userOrder.length; i++) {
        this.currentQuestionData.userOrder[i].userIndex = i;
      }

      // 恢复单词到可选列表
      const wordOption = this.currentQuestionData.availableWords.find(
          word => word.text === removedWord.text && word.originalIndex === removedWord.originalIndex
      );
      if (wordOption) {
        wordOption.used = false;
      }
    },

    // 获取单词样式类
    getWordClass(word, index) {
      if (!this.showResult) {
        return { 'selected': true };
      }

      const isCorrectPosition = word.originalIndex === index;
      return {
        'correct': isCorrectPosition,
        'wrong': !isCorrectPosition,
        'show-result': this.showResult
      };
    },

    // 提交答案
    submitAnswer() {
      if (!this.canSubmit) return;

      this.showResult = true;

      // 检查答案是否正确
      this.isAnswerCorrect = this.checkAnswer();

      // 标记正确和错误的单词
      this.markWords();

      if (this.isAnswerCorrect) {
        this.score += 10;
        this.correctCount++;
        this.showToastMessage('success', '排序正确！+10分');
      } else {
        this.errors++;
        this.showToastMessage('error', '排序错误！');
      }

      // 2秒后自动下一题
      // setTimeout(() => {
      //   this.autoNextQuestion();
      // }, 2000);
    },

    // 检查答案
    checkAnswer() {
      const userOrder = this.currentQuestionData.userOrder;
      const correctOrder = this.currentQuestionData.correctOrder;

      if (userOrder.length !== correctOrder.length) {
        return false;
      }

      for (let i = 0; i < userOrder.length; i++) {
        if (userOrder[i].originalIndex !== correctOrder[i].originalIndex) {
          return false;
        }
      }

      return true;
    },

    // 标记单词正确/错误状态
    markWords() {
      const userOrder = this.currentQuestionData.userOrder;
      const correctOrder = this.currentQuestionData.correctOrder;

      userOrder.forEach((word, index) => {
        const isCorrect = word.originalIndex === correctOrder[index].originalIndex;
        const wordOption = this.currentQuestionData.availableWords.find(
            w => w.text === word.text && w.originalIndex === word.originalIndex
        );
        if (wordOption) {
          if (isCorrect) {
            wordOption.isCorrect = true;
          } else {
            wordOption.isWrong = true;
          }
        }
      });
    },

    // 重置句子
    resetSentence() {
      if (this.showResult) return;

      // 恢复所有单词到可选列表
      this.currentQuestionData.userOrder.forEach(word => {
        const wordOption = this.currentQuestionData.availableWords.find(
            w => w.text === word.text && w.originalIndex === word.originalIndex
        );
        if (wordOption) {
          wordOption.used = false;
          wordOption.isCorrect = false;
          wordOption.isWrong = false;
        }
      });

      // 清空用户排序
      this.currentQuestionData.userOrder = [];
    },

    // 显示提示
    showHint() {
      if (this.hintsAvailable <= 0 || this.showResult) return;

      this.hintsAvailable--;

      // 找到第一个错误的单词位置（如果有）或者下一个要选的单词
      const nextWordIndex = this.findNextWordToHint();
      if (nextWordIndex !== -1) {
        const correctWord = this.currentQuestionData.correctOrder[nextWordIndex];
        const wordOption = this.currentQuestionData.availableWords.find(
            word => word.originalIndex === correctWord.originalIndex && !word.used
        );

        if (wordOption) {
          // 高亮提示正确的单词
          this.highlightWord(wordOption);

          // 自动选择正确的单词（可选）
          setTimeout(() => {
            this.selectWord(wordOption);
          }, 500);
        }
      }
    },

    // 找到下一个需要提示的单词
    findNextWordToHint() {
      const userOrder = this.currentQuestionData.userOrder;

      // 检查当前位置是否正确
      for (let i = 0; i < userOrder.length; i++) {
        if (userOrder[i].originalIndex !== this.currentQuestionData.correctOrder[i].originalIndex) {
          return i;
        }
      }

      // 如果当前位置都正确，返回下一个位置
      return userOrder.length;
    },

    // 高亮单词提示
    highlightWord(word) {
      word.isHinted = true;
      setTimeout(() => {
        word.isHinted = false;
      }, 1000);
    },

    // 显示Toast提示
    showToastMessage(type, message) {
      this.showToast = true;
      this.toastType = type;
      this.toastMessage = message;
      this.toastIcon = type === 'success' ? '🎉' : '😔';

      if (this.toastTimer) {
        clearTimeout(this.toastTimer);
      }

      this.toastTimer = setTimeout(() => {
        this.showToast = false;
      }, 2000);
    },

    // 自动下一题
    autoNextQuestion() {
      if (this.currentQuestion >= this.totalQuestions || this.errors >= this.maxErrors) {
        this.endGame();
      } else {
        this.nextQuestion();
      }
    },

    // 下一题
    nextQuestion() {
      if (this.currentQuestion >= this.totalQuestions || this.errors >= this.maxErrors) {
        this.endGame();
        return;
      }

      this.currentQuestion++;
      this.generateNewQuestion();
    },

    // 结束游戏
    endGame() {
      this.gameResult = this.errors < this.maxErrors ? 'win' : 'lose';
      this.showGameOver = true;
    },

    // 重新开始游戏
    restartGame() {
      this.score = 0;
      this.currentQuestion = 1;
      this.errors = 0;
      this.correctCount = 0;
      this.showGameOver = false;
      this.usedExamples.clear();
      this.hintsAvailable = 3;
      this.initGame();
    },

    // 退出游戏
    exitGame() {
      uni.navigateBack();
    },

    // 工具函数：打乱数组
    shuffleArray(array) {
      const newArray = [...array];
      for (let i = newArray.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
      }
      return newArray;
    }
  }
};
</script>

<style scoped>
.sentence-training-game {
  padding: 20rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

/* 游戏头部 */
.game-header {
  display: flex;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  backdrop-filter: blur(10px);
}

.score-info, .progress-info, .error-info {
  display: flex;
  gap: 8rpx;
}

.score-label, .progress-label, .error-label {
  font-size: 24rpx;
  color: #7f8c8d;
  margin-bottom: 8rpx;
}

.score-value, .progress-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #2c3e50;
}

.error-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #e74c3c;
}

/* 游戏容器 */
.game-container {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

/* 题目类型 */
.question-type {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
  gap: 20rpx;
}

.type-badge {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: bold;
}

.type-hint {
  font-size: 28rpx;
  color: #7f8c8d;
}

/* 中文提示 */
.chinese-hint {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 30rpx;
  border-left: 6rpx solid #3498db;
}

.hint-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #2c3e50;
  display: block;
  margin-bottom: 12rpx;
}

.hint-text {
  font-size: 26rpx;
  color: #555;
  line-height: 1.6;
}

/* 当前句子区域 */
.current-sentence-area {
  margin-bottom: 30rpx;
}

.area-title {
  font-size: 26rpx;
  font-weight: bold;
  color: #2c3e50;
  display: block;
  margin-bottom: 16rpx;
}

.current-sentence {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  min-height: 120rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  padding: 20rpx;
  align-items: center;
}

.sentence-word {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  padding: 16rpx 24rpx;
  border-radius: 12rpx;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  animation: wordSlideIn 0.3s ease-out;
}

.sentence-word.selected {
  background: linear-gradient(135deg, #3498db, #2980b9);
}

.sentence-word.correct {
  background: linear-gradient(135deg, #27ae60, #229954);
}

.sentence-word.wrong {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.sentence-word.show-result {
  animation: resultPulse 0.6s ease-in-out;
}

.word-text {
  font-size: 28rpx;
  font-weight: bold;
  margin-right: 8rpx;
}

.word-number {
  font-size: 20rpx;
  opacity: 0.8;
  background: rgba(255, 255, 255, 0.2);
  padding: 4rpx 8rpx;
  border-radius: 8rpx;
}

.empty-placeholder {
  text-align: center;
  color: #bdc3c7;
  font-size: 26rpx;
  width: 100%;
}

/* 单词选项区域 */
.word-options-area {
  margin-bottom: 20rpx;
}

.word-options {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.word-option {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #ffffff, #f8f9fa);
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  padding: 16rpx 20rpx;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.word-option:active {
  transform: scale(0.95);
}

.word-option.used {
  opacity: 0.4;
  cursor: not-allowed;
}

.word-option.correct {
  background: linear-gradient(135deg, #d5f4e6, #a3e4c7);
  border-color: #27ae60;
}

.word-option.wrong {
  background: linear-gradient(135deg, #fadbd8, #f5b7b1);
  border-color: #e74c3c;
}

.word-option .word-text {
  font-size: 26rpx;
  color: #2c3e50;
  font-weight: 600;
}

.word-used {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  background: #27ae60;
  color: white;
  border-radius: 50%;
  width: 32rpx;
  height: 32rpx;
  font-size: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 原句参考 */
.original-sentence {
  background: rgba(52, 152, 219, 0.1);
  border-radius: 12rpx;
  padding: 16rpx;
  margin-top: 20rpx;
}

.original-title {
  font-size: 24rpx;
  color: #3498db;
  font-weight: bold;
  display: block;
  margin-bottom: 8rpx;
}

.original-text {
  font-size: 24rpx;
  color: #7f8c8d;
  font-style: italic;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 16rpx;
  justify-content: center;
  flex-wrap: wrap;
}

.action-btn {
  flex: 1;
  min-width: 200rpx;
  padding: 20rpx;
  border: none;
  border-radius: 16rpx;
  font-size: 28rpx;
  font-weight: bold;
  transition: all 0.3s ease;
}

.action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.submit-btn {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
}

.submit-btn:not(:disabled):active {
  transform: scale(0.95);
}

.reset-btn {
  background: linear-gradient(135deg, #95a5a6, #7f8c8d);
  color: white;
}

.hint-btn {
  background: linear-gradient(135deg, #f39c12, #d35400);
  color: white;
}

.next-btn {
  background: linear-gradient(135deg, #27ae60, #229954);
  color: white;
}

.btn-text {
  display: block;
}

/* 反馈区域 */
.result-feedback {
  padding: 24rpx;
  border-radius: 16rpx;
  margin-top: 20rpx;
  text-align: center;
  animation: slideInUp 0.5s ease-out;
}

.result-feedback.correct {
  background: linear-gradient(135deg, #d5f4e6, #a3e4c7);
  border: 2rpx solid #27ae60;
}

.result-feedback.wrong {
  background: linear-gradient(135deg, #fadbd8, #f5b7b1);
  border: 2rpx solid #e74c3c;
}

.feedback-icon {
  font-size: 48rpx;
  display: block;
  margin-bottom: 12rpx;
}

.feedback-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #2c3e50;
  display: block;
  margin-bottom: 8rpx;
}

.feedback-detail {
  font-size: 24rpx;
  color: #7f8c8d;
}

/* Toast提示 */
.toast-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  animation: toastSlideIn 0.3s ease-out;
}

.toast-content {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24rpx;
  padding: 30rpx 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 20rpx;
  min-width: 300rpx;
  justify-content: center;
}

.toast-container.success .toast-content {
  border-left: 8rpx solid #27ae60;
  background: linear-gradient(135deg, #d5f4e6, #a3e4c7);
}

.toast-container.error .toast-content {
  border-left: 8rpx solid #e74c3c;
  background: linear-gradient(135deg, #fadbd8, #f5b7b1);
}

.toast-icon {
  font-size: 48rpx;
  animation: bounce 0.5s ease-in-out;
}

.toast-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #2c3e50;
}

/* 游戏结束弹窗 */
.game-over-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 30rpx;
  padding: 60rpx 40rpx;
  text-align: center;
  width: 80%;
  max-width: 600rpx;
}

.modal-title {
  font-size: 48rpx;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 40rpx;
  display: block;
}

.modal-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 40rpx;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-label {
  font-size: 24rpx;
  color: #7f8c8d;
  margin-bottom: 8rpx;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #3498db;
}

.modal-actions {
  display: flex;
  gap: 20rpx;
}

.modal-btn {
  flex: 1;
  padding: 20rpx;
  border: none;
  border-radius: 16rpx;
  color: white;
  font-size: 28rpx;
}

.restart-btn {
  background: #3498db;
}

.exit-btn {
  background: #95a5a6;
}

/* 动画效果 */
@keyframes wordSlideIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes resultPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(30rpx);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toastSlideIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.2);
  }
  60% {
    transform: scale(1.1);
  }
}

/* 响应式设计 */
@media (max-width: 750px) {
  .word-options {
    justify-content: center;
  }

  .action-btn {
    min-width: auto;
  }

  .current-sentence {
    justify-content: center;
  }
}
</style>
